<template>
<div>
  <div>
<!--    外面写其他的东西-->
  </div>
<!--  这里只管登录部分-->
  <div class="login-box" style="" id="login-box">
    <div class="header-box">
      <div class="title-box">
        <img src="" alt="" style="width:70px; height: 70px; border: 1px solid #333;float: left">
        <span style="display: block; float: left;line-height: 70px;">后台管理系统</span>
      </div>
    </div>
    <div class="link-box">
      <router-link to="/login" class="router-box tog" id="login" @click.native="reLogin">登录</router-link>
      <router-link to="/register" class="router-box" id="register" @click.native="reRegister">注册</router-link>
    </div>
    <div class="body-box">
      <router-view />
    </div>
  </div>
</div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "index",
  data() {
  },
  methods:{
    reLogin(){
      $("#login").addClass("tog");
      $("#register").removeClass("tog");
    },
    reRegister(){
      $("#login").removeClass("tog");
      $("#register").addClass("tog");
    }
  }
}
</script>

<style scoped>
.login-box{
  position: absolute;
  top: 15%;
  right: 10%;
  width: 420px;
  height: 500px;
  border: 1px solid #333;
  border-radius: 3%;
}
.header-box{
  height: 130px;
}
.title-box{
  margin: 40px auto 0 auto;
  width: 45%;
}
.link-box{
  width: 70%;
  height: 40px;
  line-height: 40px;
  /*border: 1px solid #333;*/
  margin-bottom: 20px;
}
.router-box{
  display: block;
  float:left;
  width: 50%;
  text-align: center;
  color: #b5b5b5;
  border-bottom: 2px solid #b5b5b5;
}
.body-box{
  width: 420px;
}
.tog{
  border-bottom: 2px solid #409EFF;
  color: #409EFF;
}
</style>
